Telegram Group »
United States »
Defront при поддержке Зарплата ру — про фронтенд разработку и не только » Telegram Webview
Self-Profiling API на практике
Ник Джансма написал статью про новое экспериментальное API для профилировки производительности сайтов на устройствах пользователей — "JS Self-Profiling API In Practice".
Self-Profiling API предоставляет программный доступ к семплирующему профилировщику для получения детальной информации о выполнении JavaScript-кода у пользователей сайта. API можно использовать как для анализа производительности кода сайта, так и для анализа производительности скриптов внешних сервисов. Проанализировать выполнение кода можно на любом этапе жизни страницы. Доступ к Self-Profiling API включается с помощью HTTP-заголовка
Несмотря на экспериментальный статус Facebook и Microsoft уже начали использовать Self-Profiling API в своих сервисах для поиска проблем производительности.
На данный момент поддержка Self-Profiling API есть только в Chrome версии 94 и выше.
#performance #api #experimental
https://calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/
Ник Джансма написал статью про новое экспериментальное API для профилировки производительности сайтов на устройствах пользователей — "JS Self-Profiling API In Practice".
Self-Profiling API предоставляет программный доступ к семплирующему профилировщику для получения детальной информации о выполнении JavaScript-кода у пользователей сайта. API можно использовать как для анализа производительности кода сайта, так и для анализа производительности скриптов внешних сервисов. Проанализировать выполнение кода можно на любом этапе жизни страницы. Доступ к Self-Profiling API включается с помощью HTTP-заголовка
Document-Policy: js-profiling
. Оно оказывает минимальный эффект на производительность сайта у пользователей.Несмотря на экспериментальный статус Facebook и Microsoft уже начали использовать Self-Profiling API в своих сервисах для поиска проблем производительности.
На данный момент поддержка Self-Profiling API есть только в Chrome версии 94 и выше.
#performance #api #experimental
https://calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/
Web Performance Calendar
JS Self-Profiling API In Practice
Table of Contents
The JS Self-Profiling API
What is Sampled Profiling?
Downsides to Sampled Profiling
API
Document Policy
API Shape
Sample Interval
Buffer
Who to Profile
When to Profile
Specific Operations
User Interactions…
The JS Self-Profiling API
What is Sampled Profiling?
Downsides to Sampled Profiling
API
Document Policy
API Shape
Sample Interval
Buffer
Who to Profile
When to Profile
Specific Operations
User Interactions…
Пропозал "await.ops"
Недавно узнал про пропозал "await.ops" — расширение
Благодаря новым операторам код получается немного короче, так как отпадает необходимость в написании
На данный момент "await.ops" находится на Stage 1, и его поддержки в браузерах нет. Авторы ищут дополнительные сценарии использования предложения для его продвижения на Stage 2.
#js #proposal
https://github.com/tc39/proposal-await.ops
Недавно узнал про пропозал "await.ops" — расширение
await
операторами await.all
, await.any
, await.race
и await.allSettled
. Они работают точно также как одноимённые методы у Promise
.Благодаря новым операторам код получается немного короче, так как отпадает необходимость в написании
Promise
:
// до
await Promise.all(users.map(async x => fetchProfile(x.id)))
// после
await.all users.map(async x => fetchProfile(x.id))
На данный момент "await.ops" находится на Stage 1, и его поддержки в браузерах нет. Авторы ищут дополнительные сценарии использования предложения для его продвижения на Stage 2.
#js #proposal
https://github.com/tc39/proposal-await.ops
GitHub
GitHub - tc39/proposal-await.ops: Introduce await.all / await.race / await.allSettled / await.any to simplify the usage of Promises
Introduce await.all / await.race / await.allSettled / await.any to simplify the usage of Promises - tc39/proposal-await.ops
Встроенный браузер Facebook
Томас Штайнер проанализировал работу встроенного браузера Facebook (In-App Browser — IAB), чтобы разобраться, чем он отличается от обычных браузеров — "Inspecting Facebook's WebView".
Некоторые приложения открывают ссылки во встроенном браузере на базе WebView, потому что это даёт им больше возможностей для работы со страницей. На сайтах, открытых с помощью IAB Facebook, встраивается код сбора метрик производительности и информации о доступных возможностях WebView, в
WebView не поддерживает все возможности браузеров, поэтому некоторые страницы в нём могут быть сломаны или отображаться неправильно. Так как пользователей Facebook несколько миллиардов, вероятность встречи с подобными ошибками довольно высока. Для упрощения решения проблем в IAB включён режим отладки, чтобы разработчики могли подключиться к WebView удалённо с помощью DevTools браузера.
#facebook #debug #mobile
https://blog.tomayac.com/2019/12/09/inspecting-facebooks-webview/
Томас Штайнер проанализировал работу встроенного браузера Facebook (In-App Browser — IAB), чтобы разобраться, чем он отличается от обычных браузеров — "Inspecting Facebook's WebView".
Некоторые приложения открывают ссылки во встроенном браузере на базе WebView, потому что это даёт им больше возможностей для работы со страницей. На сайтах, открытых с помощью IAB Facebook, встраивается код сбора метрик производительности и информации о доступных возможностях WebView, в
window
добавляются свойства TEMPORARY
и PERSISTENT
, модифицируется отправляемый HTTP-заголовок User-Agent.WebView не поддерживает все возможности браузеров, поэтому некоторые страницы в нём могут быть сломаны или отображаться неправильно. Так как пользователей Facebook несколько миллиардов, вероятность встречи с подобными ошибками довольно высока. Для упрощения решения проблем в IAB включён режим отладки, чтобы разработчики могли подключиться к WebView удалённо с помощью DevTools браузера.
#facebook #debug #mobile
https://blog.tomayac.com/2019/12/09/inspecting-facebooks-webview/
Tomayac
Inspecting Facebook's WebView
The personal blog of Thomas Steiner
Forwarded from Defront Feed — новости веб-разработки (Alexander Myshov)
Автор npm-пакета colors (20 миллионов загрузок в неделю) в знак протеста добавил в его код бесконечный цикл. Также он удалил исходный код своего проекта faker.js. Таким образом мейнтейнер пытается привлечь внимание к проблеме финансирования open source разработчиков
https://snyk.io/blog/open-source-npm-packages-colors-faker/
https://snyk.io/blog/open-source-npm-packages-colors-faker/
Релиз Chrome 97
На прошлой неделе вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новинки релиза — "New in Chrome 97".
В Chrome 97 по умолчанию включён WebTransport API. С его помощью обеспечивается быстрый обмен данными между клиентом и сервером в сетях с высокими задержками. Поддерживается передача данных без гарантии доставки пакетов с помощью Datagram API и с гарантиями доставки пакетов с помощью Streams API. WebTransport API работает только с HTTP/3.
Добавлена поддержка экспериментального метода
В JavaScript-движке у массивов появились методы
В Chrome DevTools добавлена вкладка "Recorder". С её помощью можно записывать и повторно воспроизводить действия на странице (user flows). Обновлён список эмулируемых устройств. На вкладке "Elements" появилось автодополнение при редактировании HTML. Настройки DevTools теперь можно синхронизировать между разными устройствами.
#chrome #release
https://developer.chrome.com/en/blog/new-in-chrome-97/
https://developer.chrome.com/blog/new-in-devtools-97/
На прошлой неделе вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новинки релиза — "New in Chrome 97".
В Chrome 97 по умолчанию включён WebTransport API. С его помощью обеспечивается быстрый обмен данными между клиентом и сервером в сетях с высокими задержками. Поддерживается передача данных без гарантии доставки пакетов с помощью Datagram API и с гарантиями доставки пакетов с помощью Streams API. WebTransport API работает только с HTTP/3.
Добавлена поддержка экспериментального метода
HTMLScriptElement.supports()
. Благодаря ему можно определить, какой вид скриптов поддерживается браузером.В JavaScript-движке у массивов появились методы
findLast()
, findLastIndex()
для поиска элементов с конца.В Chrome DevTools добавлена вкладка "Recorder". С её помощью можно записывать и повторно воспроизводить действия на странице (user flows). Обновлён список эмулируемых устройств. На вкладке "Elements" появилось автодополнение при редактировании HTML. Настройки DevTools теперь можно синхронизировать между разными устройствами.
#chrome #release
https://developer.chrome.com/en/blog/new-in-chrome-97/
https://developer.chrome.com/blog/new-in-devtools-97/
Chrome for Developers
New in Chrome 97 | Blog | Chrome for Developers
Chrome 97 is rolling out now! There's a new option for sending real time messages between the client and server using Web Transport. You can use feature detection to see what types of scripts a browser supports. JavaScript gets better, and there's plenty…
В поиске лучшего способа балансировки переносов слов
Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте defront. Оказалось, что не всё так просто.
Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:
хотелось бы, чтобы текст выглядел так:
В последнем варианте текст сбалансирован и не отвлекает внимание.
Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.
Реализация New York Times для небольших заголовков подходит идеально, также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансировщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.
Ещё можно сделать автоматическую вставку
Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства
Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с
#html #ux #a11y
https://Defront при поддержке Зарплата ру — про фронтенд разработку и не только/com.defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/
Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте defront. Оказалось, что не всё так просто.
Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:
Причины отсутствия поддержки AVIF в
Safari
хотелось бы, чтобы текст выглядел так:
Причины отсутствия
поддержки AVIF в Safari
В последнем варианте текст сбалансирован и не отвлекает внимание.
Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.
Реализация New York Times для небольших заголовков подходит идеально, также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансировщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.
Ещё можно сделать автоматическую вставку
<br>
в нужном месте разрыва заголовка. На больших экранах заголовки будут выглядеть хорошо, на маленьких экранах в редких случаях перенос будет выглядеть странно:
Использование
SomeNewApi
и
OtherNewApi
в Node.js
Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства
text-wrap: balance
. Оно было предложено Adobe в 2013 году, и его поддержки до сих пор нет ни в одном браузере.Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с
<br>
, но пока оставлю всё без изменений. Балансировка переноса слов — это коварная штука. #html #ux #a11y
https://Defront при поддержке Зарплата ру — про фронтенд разработку и не только/com.defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/
Абсолютные импорты в JavaScript
Евгений Карагодин написал статью про настройку абсолютных импортов — "Абсолютные импорты в JavaScript".
Относительные пути в спецификаторах импортов могут быть неудобны в проектах с глубокой вложенностью директорий. Поэтому были придуманы разные способы для импорта файлов от корня проекта. В статье рассказывается про основные способы упрощения работы с импортами. Про сложность настройки абсолютных импортов в Node.js-проектах c TypeScript и тест-раннерами.
Процесс настройки абсолютных импортов должен стать проще после имплементации спецификация import maps, с помощью которой можно управлять резолвингом модулей. На данный момент import maps поддерживаются только в Deno.
#js #esm
https://blog.ekaragodin.com/TH2jgliMXOO
Евгений Карагодин написал статью про настройку абсолютных импортов — "Абсолютные импорты в JavaScript".
Относительные пути в спецификаторах импортов могут быть неудобны в проектах с глубокой вложенностью директорий. Поэтому были придуманы разные способы для импорта файлов от корня проекта. В статье рассказывается про основные способы упрощения работы с импортами. Про сложность настройки абсолютных импортов в Node.js-проектах c TypeScript и тест-раннерами.
Процесс настройки абсолютных импортов должен стать проще после имплементации спецификация import maps, с помощью которой можно управлять резолвингом модулей. На данный момент import maps поддерживаются только в Deno.
#js #esm
https://blog.ekaragodin.com/TH2jgliMXOO
Teletype
Абсолютные импорты в JavaScript
Так уж сложилось, что в JavaScript импорты относительные. Но в любом более-менее крупном проекте это быстро превращается в ад (relative...
Релиз Firefox 96
Несколько дней назад вышла новая версия Firefox. Самое интересное — изменение поведения кук, добавление Web Locks API, добавление поддержки CSS-свойства color-scheme.
Теперь по умолчанию у всех кук устанавливается атрибут
Добавлен Web Locks API. Это экспериментальное API для управления доступом к разделяемым ресурсам между разными сервис-воркерами или табами приложения.
Добавлена поддержка CSS-свойства
В этом примере свойство
В энкодере изображений появилась поддержка WebP. Благодаря этому изменению теперь можно программно экспортировать WebP-изображения из canvas с помощью методов
#firefox #release
https://www.mozilla.org/en-US/firefox/96.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96
Несколько дней назад вышла новая версия Firefox. Самое интересное — изменение поведения кук, добавление Web Locks API, добавление поддержки CSS-свойства color-scheme.
Теперь по умолчанию у всех кук устанавливается атрибут
SameSite=lax
. Это изменение выравнивает поведение Firefox c Chrome и помогает в защите от атак Cross-Site Request Forgery (CSRF).Добавлен Web Locks API. Это экспериментальное API для управления доступом к разделяемым ресурсам между разными сервис-воркерами или табами приложения.
Добавлена поддержка CSS-свойства
color-scheme
. С его помощью реализация тёмной темы для страницы делается в пару строк:
:root {
color-scheme: light dark;
}
В этом примере свойство
color-scheme
сообщает браузеру о том, что вся страница поддерживает светлую и тёмную тему, и браузер начинает управлять цветами страницы автоматически.В энкодере изображений появилась поддержка WebP. Благодаря этому изменению теперь можно программно экспортировать WebP-изображения из canvas с помощью методов
HTMLCanvasElement.toDataURL()
, HTMLCanvasElement.toBlob()
и OffscreenCanvas.toBlob()
.#firefox #release
https://www.mozilla.org/en-US/firefox/96.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96
Mozilla
Firefox 96.0, See All New Features, Updates and Fixes
Новый формат шрифта COLRv1 в Chrome 98
Доминик Рйотшнес и Род Шитер рассказали про COLRv1 — новый формат шрифта c поддержкой цветных глифов — "COLRv1 Color Gradient Vector Fonts in Chrome 98".
Существующие форматы шрифтов с поддержкой цветных глифов не очень хорошо подходят для веба. Так размер шрифта формата CBDT/CBLC со всеми эмоджи занимает 9Мб. Из-за этого на сайтах и в веб-приложениях для представления эмоджи вместо шрифтов используют изображения. COLRv1 призван решить эту проблему.
Версия шрифта с эмоджи в формате COLRv1 занимает 1.2Мб в распакованном виде и всего лишь 0.6Мб в контейнере woff2. Оптимизация размера происходит за счёт переиспользования глифов с применением трансформаций. Также COLRv1 поддерживает линейные, радиальные и конические градиенты, что открывает новые возможности для типографики в вебе.
На данный момент поддержка COLRv1 есть только в бете Chrome 98.
#fonts
https://developer.chrome.com/blog/colrv1-fonts/
Доминик Рйотшнес и Род Шитер рассказали про COLRv1 — новый формат шрифта c поддержкой цветных глифов — "COLRv1 Color Gradient Vector Fonts in Chrome 98".
Существующие форматы шрифтов с поддержкой цветных глифов не очень хорошо подходят для веба. Так размер шрифта формата CBDT/CBLC со всеми эмоджи занимает 9Мб. Из-за этого на сайтах и в веб-приложениях для представления эмоджи вместо шрифтов используют изображения. COLRv1 призван решить эту проблему.
Версия шрифта с эмоджи в формате COLRv1 занимает 1.2Мб в распакованном виде и всего лишь 0.6Мб в контейнере woff2. Оптимизация размера происходит за счёт переиспользования глифов с применением трансформаций. Также COLRv1 поддерживает линейные, радиальные и конические градиенты, что открывает новые возможности для типографики в вебе.
На данный момент поддержка COLRv1 есть только в бете Chrome 98.
#fonts
https://developer.chrome.com/blog/colrv1-fonts/
Chrome for Developers
COLRv1 Color Gradient Vector Fonts in Chrome 98 | Blog | Chrome for Developers
In Chrome 98, the Chrome and Fonts teams have added support for COLRv1, an evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and compact font…
Forwarded from Defront Feed — новости веб-разработки (Alexander Myshov)
Открыт опрос по текущему состоянию экосистемы JavaScript. Цель опроса — исследование популярности инструментов и поиск проблемных мест в разработке фронтенда. Опрос можно проходить поэтапно.
https://app.stateofjs.com/survey/state-of-js/2021
https://app.stateofjs.com/survey/state-of-js/2021
Трекинг пользователей Safari 15 с помощью в IndexedDB
Мартин Бажаник рассказал про баг Safari, который позволяет узнать, с какими сайтами сейчас работает пользователь — "Exploiting IndexedDB API information leaks in Safari 15".
В Safari 15 при любом взаимодействии с IndexedDB из-за ошибки для всех активных сайтов в рамках одной сессии создаётся пустая база с именем запрошенной базы. Так как имена баз для разных сайтов отличаются друг от друга, то по этому имени можно вычислить, какой именно сайт сейчас открыт у пользователя. Данный баг позволяет вычислить Twitter, YouTube, Bloomberg, Alibaba, Netflix, VK, Instagram и другие сайты. Ситуация ухудшается тем, что у YouTube, Google Keep и Google Calendar в названии базы данных находится идентификатор пользователя, с помощью которого можно узнать информацию о пользователе.
Ошибка воспроизводится в Safari 15 и во всех браузерах на iOS 15 и iPadOS 15. На данный момент баг в трекере WebKit уже исправлен, фикс скорее всего выкатится со следующим обновлением системы.
#privacy #safari #webkit
https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/
Мартин Бажаник рассказал про баг Safari, который позволяет узнать, с какими сайтами сейчас работает пользователь — "Exploiting IndexedDB API information leaks in Safari 15".
В Safari 15 при любом взаимодействии с IndexedDB из-за ошибки для всех активных сайтов в рамках одной сессии создаётся пустая база с именем запрошенной базы. Так как имена баз для разных сайтов отличаются друг от друга, то по этому имени можно вычислить, какой именно сайт сейчас открыт у пользователя. Данный баг позволяет вычислить Twitter, YouTube, Bloomberg, Alibaba, Netflix, VK, Instagram и другие сайты. Ситуация ухудшается тем, что у YouTube, Google Keep и Google Calendar в названии базы данных находится идентификатор пользователя, с помощью которого можно узнать информацию о пользователе.
Ошибка воспроизводится в Safari 15 и во всех браузерах на iOS 15 и iPadOS 15. На данный момент баг в трекере WebKit уже исправлен, фикс скорее всего выкатится со следующим обновлением системы.
#privacy #safari #webkit
https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/
Fingerprint
Exploiting IndexedDB API information leaks in Safari 15
Discover how a software bug in Safari 15's IndexedDB API can track your online activity and reveal your identity.
За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:
— Паттерны работы в терминале
— Преимущества парсинга входных данных
— Выводы после 10000 часов программирования
— Кто использует Save-Data
— Способы упаковки JSON
— Оптимизация сложения векторов с помощью WebAssembly
— Как работает детектор блокировщиков рекламы
— Исключения и значения-ошибки
— Улучшение производительности Wix
— Советы по обходу ненадёжности типов TypeScript
Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 340 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
— Паттерны работы в терминале
— Преимущества парсинга входных данных
— Выводы после 10000 часов программирования
— Кто использует Save-Data
— Способы упаковки JSON
— Оптимизация сложения векторов с помощью WebAssembly
— Как работает детектор блокировщиков рекламы
— Исключения и значения-ошибки
— Улучшение производительности Wix
— Советы по обходу ненадёжности типов TypeScript
Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 340 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
Новое дерево доступности в Chrome DevTools
Йохан Бей из команды разработки Chrome DevTools рассказал про новое дерево доступности, которое появится в будущих версиях Chrome — "Full accessibility tree in Chrome DevTools".
С помощью дерева доступности скринридеры и другие технологии доступности предоставляют средства для работы со страницей. В Chrome 97 и ниже дерево доступности в один момент времени может отображать только выбранный элемент и его потомков. В новой версии Chrome дерево будет отображаться для всей страницы сразу, упрощая поиск элементов, которые недоступны скринридерам. Обновлённое дерево также позволит реализовать новые функции и инструменты для решения проблем доступности.
Новое дерево доступности пока доступно только в Chrome Canary.
#debug #a11y #internals #devtools
https://developer.chrome.com/blog/full-accessibility-tree/
Йохан Бей из команды разработки Chrome DevTools рассказал про новое дерево доступности, которое появится в будущих версиях Chrome — "Full accessibility tree in Chrome DevTools".
С помощью дерева доступности скринридеры и другие технологии доступности предоставляют средства для работы со страницей. В Chrome 97 и ниже дерево доступности в один момент времени может отображать только выбранный элемент и его потомков. В новой версии Chrome дерево будет отображаться для всей страницы сразу, упрощая поиск элементов, которые недоступны скринридерам. Обновлённое дерево также позволит реализовать новые функции и инструменты для решения проблем доступности.
Новое дерево доступности пока доступно только в Chrome Canary.
#debug #a11y #internals #devtools
https://developer.chrome.com/blog/full-accessibility-tree/
Chrome for Developers
Full accessibility tree in Chrome DevTools | Blog | Chrome for Developers
Review the new, full-page accessibility tree in DevTools, as well as the design and implementation of this tree.
Неожиданное пересечение типов в TypeScript
Стэфан Баумгартнер рассказал, в каких случаях могут возникать неожиданные пересечения типов, и что с ними делать — "TypeScript: Unexpected intersections".
Неожиданное пересечение типов возникает при обновлении свойств объектов, если в качестве ключа используется переменная с объединением типов. В этом случае для ключа TypeScript будет использовать "наибольший общий делитель" в виде пересечения типов. В примере ниже таким "делителем" будет пересечение
Также неожиданное пересечение типов может возникнуть после деструктуризации объекта, так как деструктурированные свойства теряют связь с оригинальным типом.
Полезная статья. Рекомендую почитать всем, кто использует TypeScript.
#typescript
https://fettblog.eu/typescript-unexpected-intersections/
Стэфан Баумгартнер рассказал, в каких случаях могут возникать неожиданные пересечения типов, и что с ними делать — "TypeScript: Unexpected intersections".
Неожиданное пересечение типов возникает при обновлении свойств объектов, если в качестве ключа используется переменная с объединением типов. В этом случае для ключа TypeScript будет использовать "наибольший общий делитель" в виде пересечения типов. В примере ниже таким "делителем" будет пересечение
string & number
, то есть тип never
, из-за чего возникнет ошибка типизации:
interface Person {
age: number;
name: string;
}
function updatePersonByKey(
person: Person,
key: keyof Person,
value: Person[keyof Person]
) {
// тут будет ошибка типизации, так как
// key превратится в пересечение типов `string & number`
person[key] = value;
}
Также неожиданное пересечение типов может возникнуть после деструктуризации объекта, так как деструктурированные свойства теряют связь с оригинальным типом.
Полезная статья. Рекомендую почитать всем, кто использует TypeScript.
#typescript
https://fettblog.eu/typescript-unexpected-intersections/
fettblog.eu
TypeScript: Unexpected intersections
Sometimes when writing TypeScript, some of the things you’d usually do in JavaScript work a little different and cause some weird, and puzzling situations. Sometimes you just want to assign a value to an object property and get a weird error like “Type ‘string…
Cовременные возможности для работы с JavaScript-модулями
Аксель Раушмайер написал статью про современные возможности для работы с JavaScript-модулями — "Publishing and consuming ECMAScript modules via packages – the big picture".
Последние версии Node.js поддерживают package exports и package imports. Package exports используются авторами библиотек для настройки путей, по которым будет доступен импорт модулей. Package imports позволяют создавать альясы на пакеты или модули. Их можно использовать для подмены реализации модуля в зависимости от окружения. Package exports и package imports настраиваются в package.json.
В браузерах скоро появится поддержка import maps. С их помощью можно создавать альясы, относительно которых будут резолвиться спецификаторы модулей в браузере. Это полезно при доставке кода пользователям в чистом ESM, когда в названии файлов модулей есть хеши. Import maps уже используют в проде авторы почтового клиента hey.
#js #esm #nodejs #npm
https://2ality.com/2022/01/esm-specifiers.html
Аксель Раушмайер написал статью про современные возможности для работы с JavaScript-модулями — "Publishing and consuming ECMAScript modules via packages – the big picture".
Последние версии Node.js поддерживают package exports и package imports. Package exports используются авторами библиотек для настройки путей, по которым будет доступен импорт модулей. Package imports позволяют создавать альясы на пакеты или модули. Их можно использовать для подмены реализации модуля в зависимости от окружения. Package exports и package imports настраиваются в package.json.
В браузерах скоро появится поддержка import maps. С их помощью можно создавать альясы, относительно которых будут резолвиться спецификаторы модулей в браузере. Это полезно при доставке кода пользователям в чистом ESM, когда в названии файлов модулей есть хеши. Import maps уже используют в проде авторы почтового клиента hey.
#js #esm #nodejs #npm
https://2ality.com/2022/01/esm-specifiers.html
React server components под капотом
Чан Ву рассказал про внутреннее устройство React server components (RSC) — "How React server components work: an in-depth guide".
Серверные компоненты — это экспериментальный тип React-компонентов, которые не попадают в клиентский бандл и позволяют бесшовно выносить на сервер часть логики приложения. Результатом выполнения серверных компонентов является представление дерева React-компонентов в формате, подходящем для стриминга. В статье подробно разбирается принцип работы RSC, их ограничения и внутреннее устройство.
Статья хорошая. Рекомендую почитать всем, кто хочет разобраться в устройстве серверных компонентов.
#react #internals
https://blog.plasmic.app/posts/how-react-server-components-work/
Чан Ву рассказал про внутреннее устройство React server components (RSC) — "How React server components work: an in-depth guide".
Серверные компоненты — это экспериментальный тип React-компонентов, которые не попадают в клиентский бандл и позволяют бесшовно выносить на сервер часть логики приложения. Результатом выполнения серверных компонентов является представление дерева React-компонентов в формате, подходящем для стриминга. В статье подробно разбирается принцип работы RSC, их ограничения и внутреннее устройство.
Статья хорошая. Рекомендую почитать всем, кто хочет разобраться в устройстве серверных компонентов.
#react #internals
https://blog.plasmic.app/posts/how-react-server-components-work/
Plasmic Blog
How React server components work: an in-depth guide
A deep dive exploration of React server components under the hood.
Сравнение производительности Array.push и Array.concat
Ши Лин сравнила производительноcть методов
Ши разрабатывает фреймворк для автоматического тестирования. У одного пользователя фреймворка скорость выполнения тестов снизилась в несколько раз. Выяснилось, что для работы с DOM-деревом фреймворк собирал все элементы страницы в одномерный массив с помощью
В статье есть несколько бенчмарков, которые показывают, что объединение массивов с помощью
Добавлю свои пять копеек. Заменять
#js #performance
https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki
Ши Лин сравнила производительноcть методов
.push
и .concat
у массивов — "Javascript Array.push is 945x faster than Array.concat".Ши разрабатывает фреймворк для автоматического тестирования. У одного пользователя фреймворка скорость выполнения тестов снизилась в несколько раз. Выяснилось, что для работы с DOM-деревом фреймворк собирал все элементы страницы в одномерный массив с помощью
.concat
. Так как каждый вызов .concat
создаёт новый массив, это негативно сказывалось на производительности прогона тестов.В статье есть несколько бенчмарков, которые показывают, что объединение массивов с помощью
.push(...arr)
на два порядка быстрее .concat(arr)
.Добавлю свои пять копеек. Заменять
.concat(arr)
на .push(...arr)
стоит только там, где есть проблема, так как на очень больших массивах .push(...arr)
выкинет ошибку переполнения стека.#js #performance
https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki
DEV Community
Javascript Array.push is 945x faster than Array.concat 🤯🤔
It took six whole seconds to merge 15,000 arrays with an average size of 5 elements with .concat. What the hell is the Javascript's .concat method doing under the hood?
Опыт ускорения VK
На хабре был опубликован транскрипт доклада Александра Тоболя про опыт ускорения VK — "Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза".
Оптимизированы были все уровни от выбора нового формата изображений до выбора алгоритма управления передачей пакетов на сервере. Для изображений вместо JPEG стали использовать WebP, для передачи данных вместо JSON — MessagePack, сжатый с помощью zstd. Очень большая часть посвящена QUIC и его особенностям реализации. Самый интересный момент — с помощью QUIC улучшается утилизация пропускной способности клиента. Как побочный эффект это может привести к тому, что некий сервис может занять всю пропускную полосу клиента, затормаживая работу других сервисов.
После внедрения всех изменений на 55% ускорилась доставка изображений, количество просмотров увеличилось на 2,7% (на 10,8% для пользователей с медленной сетью), количество просмотров контента увеличилось на 250 миллионов.
#performance #http
https://habr.com/ru/company/vk/blog/594633/
На хабре был опубликован транскрипт доклада Александра Тоболя про опыт ускорения VK — "Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза".
Оптимизированы были все уровни от выбора нового формата изображений до выбора алгоритма управления передачей пакетов на сервере. Для изображений вместо JPEG стали использовать WebP, для передачи данных вместо JSON — MessagePack, сжатый с помощью zstd. Очень большая часть посвящена QUIC и его особенностям реализации. Самый интересный момент — с помощью QUIC улучшается утилизация пропускной способности клиента. Как побочный эффект это может привести к тому, что некий сервис может занять всю пропускную полосу клиента, затормаживая работу других сервисов.
После внедрения всех изменений на 55% ускорилась доставка изображений, количество просмотров увеличилось на 2,7% (на 10,8% для пользователей с медленной сетью), количество просмотров контента увеличилось на 250 миллионов.
#performance #http
https://habr.com/ru/company/vk/blog/594633/
Хабр
Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза
На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные...
Обнаружение регрессий производительности
Ангус Кролл из Netflix рассказал о методах, которые используются его командой для обнаружения регрессий производительности — "Fixing Performance Regressions Before they Happen".
Для снижения количества ложноположительных событий вместо статических пороговых значений ребята стали использовать алгоритм обнаружения аномалий. Аномалия — это показание метрики, которое превышает стандартное отклонение в n раз на массиве данных за последние m прогонов. В случае Netflix n=4 и m=40.
Для обнаружения проблем, которые не приводят к возникновению аномалий, ищут точки, которые находятся на границе двух паттернов распределения данных. Такие точки указывают на конкретные сборки, в которые было внесено изменение, деградирующее производительность. Для их обнаружения используется техника e-divisive на результатах ста последних прогонов.
Обе техники используются в тестах производительности, которые запускаются два раза при создании пул-реквеста и его слияния в основную ветку. Благодаря их внедрению количество ложноположительных падений тестов уменьшилось в десять раз.
Очень полезная статья. Рекомендую почитать всем, кто занимается производительностью и настраивает мониторинги.
#performance
https://netflixtechblog.com/fixing-performance-regressions-before-they-happen-eab2602b86fe
Ангус Кролл из Netflix рассказал о методах, которые используются его командой для обнаружения регрессий производительности — "Fixing Performance Regressions Before they Happen".
Для снижения количества ложноположительных событий вместо статических пороговых значений ребята стали использовать алгоритм обнаружения аномалий. Аномалия — это показание метрики, которое превышает стандартное отклонение в n раз на массиве данных за последние m прогонов. В случае Netflix n=4 и m=40.
Для обнаружения проблем, которые не приводят к возникновению аномалий, ищут точки, которые находятся на границе двух паттернов распределения данных. Такие точки указывают на конкретные сборки, в которые было внесено изменение, деградирующее производительность. Для их обнаружения используется техника e-divisive на результатах ста последних прогонов.
Обе техники используются в тестах производительности, которые запускаются два раза при создании пул-реквеста и его слияния в основную ветку. Благодаря их внедрению количество ложноположительных падений тестов уменьшилось в десять раз.
Очень полезная статья. Рекомендую почитать всем, кто занимается производительностью и настраивает мониторинги.
#performance
https://netflixtechblog.com/fixing-performance-regressions-before-they-happen-eab2602b86fe
Medium
Fixing Performance Regressions Before they Happen
How the Netflix TVUI team implemented a robust strategy to quickly and easily detect performance anomalies before they a
Forwarded from Defront Feed — новости веб-разработки (Alexander Myshov)
Let's Encrypt из-за неточностей имплементации валидации отзывает сертификаты, которые были выпущены в течение последних 90 дней. Отзыв произойдёт 28 января и затронет примерно 1% пользователей сервиса.
https://community.letsencrypt.org/t/2022-01-25-issue-with-tls-alpn-01-validation-method/170450
https://community.letsencrypt.org/t/2022-01-25-issue-with-tls-alpn-01-validation-method/170450